<template>
  <div v-if="cartStore.cartList.length === 0">
    <van-empty
      class="custom-image"
      image="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
      description="购物车是空的，赶快去挑选好货~"
    />
  </div>
  <div v-else class="cart-container">
    <!-- 商店信息 -->
    <div class="shop">
      <van-icon name="shop-o" />
      <span class="shop-name">嗨购商城</span>
    </div>
    <!-- 遍历渲染商品信息 -->
    <div>
      <div v-for="item in cartStore.cartList" :key="item.proid">
        <!-- $event就是内部你改变选中状态之后的值 -->
        <van-swipe-cell>
          <div class="goods-cell">
            <van-checkbox
              class="checkbox"
              v-model="item.state"
              @change="
                cartStore.changeGoodsState({ proid: item.proid, state: $event })
              "
            ></van-checkbox>
            <!-- 右边是商品卡片 -->
            <van-card
              class="goods-card"
              :num="item.number"
              :price="item.price"
              :title="item.proname"
              :thumb="item.img"
            >
              <template #price>
                <span style="color: red; font-size: 15px">
                  ￥{{ formatPrice(item.price) }}
                </span>
              </template>
              <template #num>
                <!-- $event代表change事件本身传递出来的参数 -->
                <van-stepper
                  v-model="item.number"
                  theme="round"
                  button-size="22"
                  :min="1"
                  disable-input
                  @change="
                    cartStore.changeGoodsNumber({
                      proid: item.proid,
                      number: $event
                    })
                  "
                />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="cartStore.deleteGoods(item.proid)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>

    <van-submit-bar
      :price="cartStore.getTotalAmount() * 100"
      button-text="提交订单"
      @submit="onSubmit"
      :disabled="cartStore.getTotalAmount() === 0"
    >
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { formatPrice } from '@/hooks'
import { useCartStore } from '@/store/modules/cart'
const cartStore = useCartStore()

const allChecked = computed({
  set (value) {
    cartStore.selectAllOrNot(value)
  },
  get () {
    return cartStore.isAllChecked
  }
})

// 提交
const onSubmit = () => {
  console.log('---onSubmit---')
}
</script>

<style lang="scss" scoped>
::v-deep .van-empty__image {
  padding-top: 200px;
  width: 80px;
  height: 80px;
}
.cart-container {
  padding-bottom: 100px;
  overflow: auto;
  height: calc(100vh - 100px);

  .shop {
    background-color: white;
    border-bottom: 1px solid #edeeed;
    padding: 5px 10px;
    .shop-name {
      margin-left: 5px;
      font-size: 14px;
      color: #3f3f3f;
    }
  }
  .goods-cell {
    display: flex;
    background-color: white;
    border-bottom: 1px solid #edeeed;
    height: 100%;
    align-items: center;
    .checkbox {
      width: 40px;
      height: 100%;
      line-height: 100%;
      justify-content: center;
    }

    .goods-card {
      flex: 1;
      margin: 0;
      background-color: white;
    }
  }

  .delete-button {
    height: 100%;
  }
  ::v-deep .van-submit-bar {
    background: hsla(0, 0%, 100%, 0.95);
    bottom: 50px;
  }
}
// 去除滚动条
.cart-container::-webkit-scrollbar {
  width: 0 !important;
}
</style>
